<template>
	<div class="body">
		<particlesJs>
		</particlesJs>
		<div class="main">
			<div class="card1">
				<div
				    class="echart"
				    id="mychart"
				    :style="{ float: 'left', width: '100%', height: '510px' }"
				  ></div>
			</div>
			<div class="card2">
				<div class="dataTitle">昨日数据</div>
				<div class="dataTitle2">数据更新至{{dateData}}</div>
				<div class="dataBorder">
					<div class="organizationTitle">社团数</div>
					<div class="organizationText">{{organizationLength}}</div>
					<div class="line1"></div>
					<div class="eventTitle">活动数</div>
					<div class="eventText">{{eventLength}}</div>
					<div class="line2"></div>
					<div class="peopleTitle">访问总人数</div>
					<div class="peopleText">526</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	import {searchOrganization} from "@/api/organizationServer";
	import {searchEvent} from "@/api/eventServer";
	import particlesJs from "../../components/particles/Particles.vue"
	import * as echarts from 'echarts';
	export default {
		components:{
			particlesJs
		},
		data(){
			return {
				dateData:"",
				eventLength:"",
				organizationLength:"",
			}
		},
		 mounted() {
		    this.initEcharts();
			this.getDateTime();
			this.getEventLength();
			this.getOrganizationLength();
		  },
		  methods: {
			  getOrganizationLength(){
				  let that = this
				  searchOrganization().then(response =>{
				  	//查询成功
					that.organizationLength = response.data.data.length
				  })
			  },
			  getEventLength(){
				  let that = this
				  searchEvent().then(response =>{
					//查询成功
					that.eventLength = response.data.data.length
				  })
			  },
		    initEcharts() {
		      const option = {
		        title: {
		          text: "活动点击量排名前四"
		        },
		        tooltip: {},
		        // legend: {
		        //   data: ["点击量"]
		        // },
		        xAxis: {
		          data: ["第一届校园辩...", "看党史 学...", "大学生职业规...", "学生会团建之..."]
		        },
		        yAxis: {},
		        series: [
		          {
		            name: "点击量",
		            type: "bar", //类型为柱状图
		            data: [532, 468, 367, 329,]
		          }
		        ]
		      };
		      const myChart = echarts.init(document.getElementById("mychart"));// 图标初始化
		      myChart.setOption(option);// 渲染页面
		      //随着屏幕大小调节图表
		      window.addEventListener("resize", () => {
		        myChart.resize();
		      });
		    },
			// 获取当前日期（年份，月份，几号）
			getDateTime () {
			  let that = this
			  //年
			  let year = new Date().getFullYear();
			  //月份是从0月开始获取的，所以要+1;
			  let month = new Date().getMonth() +1;
			  //日
			  let day = new Date().getDate();
			  that.dateData = year + '-' + month + '-' + day;
			}
		}
	}
</script>

<style>
	.body{
		/* position: relative;
		top: -50px;
		left: -60px;
		width: 1600px; */
	}
	.main{
		z-index: 10;
		position: relative;
		top: -700px;
	}
	.card1{
		background-color: rgba(255, 255, 255, 100);
		box-shadow: 15px 15px 40px -19px rgba(0, 0, 0, 0.4);
		width: 55%;
		height: 510px;
		position: relative;
		top: 40px;
		left: 50px;
	}
	.echart{
		position: relative;
		top: 20px;
		left: 20px;
	}
	.card2{
		left: 850px;
		top: 40px;
		width: 385px;
		height: 510px;
		line-height: 20px;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 15px 15px 40px -19px rgba(0, 0, 0, 0.4);
		position: absolute;

	}
	.dataTitle{
		color: rgba(16, 16, 16, 100);
		font-size: 20px;
		font-weight: 600;
		position: relative;
		text-align: left;
		top: 26px;
		left: 29px;
	}
	.dataTitle2{
		color: rgba(136, 136, 136, 100);
		font-size: 14px;
		position: relative;
		text-align: left;
		top: 7.5px;
		left: 130px;
	}
	.dataBorder{
		position: relative;
		top: 30px;
	}
	.organizationTitle{
		color: rgba(136, 136, 136, 100);
		font-size: 14px;
		position: relative;
		top: 41px;
	}
	.organizationText{
		color: rgba(16, 16, 16, 100);
		font-size: 22px;
		position: relative;
		top: 66px;
	}
	.line1{
		background-color: #e7e7eb;
		width: 100px;
		height: 0.5px;
		position: relative;
		top: 95px;
		left: 140px;
	}
	.eventTitle{
		color: rgba(136, 136, 136, 100);
		font-size: 14px;
		position: relative;
		top: 124px;
	}
	.eventText{
		color: rgba(16, 16, 16, 100);
		font-size: 22px;
		position: relative;
		top: 149px;
	}
	.line2{
		background-color: #e7e7eb;
		width: 100px;
		height: 0.5px;
		position: relative;
		top: 180px;
		left: 140px;
	}
	.peopleTitle{
		color: rgba(136, 136, 136, 100);
		font-size: 14px;
		position: relative;
		top: 207px;
	}
	.peopleText{
		color: rgba(16, 16, 16, 100);
		font-size: 22px;
		position: relative;
		top: 232px;
	}
</style>
